<template>
  <div class="audition110">
    <h3>重排(回流， reflow)</h3>
    <p>当元素的尺寸、布局、隐藏等条件发生变化，重新构建渲染树</p>
    <h3>什么情况会触发重排:</h3>
    <p>1. 页面渲染初始化时</p>
    <p>2. 添加或删除可见的DOM元素</p>
    <p>3. 元素位置改变</p>
    <p>4. 元素尺寸改变</p>
    <p>5. 浏览器窗口尺寸的变化（resize事件发生时）</p>
    <p>6. 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变</p>
    <p>7. 读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height, width/height,　getComputedStyle(),　currentStyle(IE)　)</p>
    <hr>
    <h3>重绘：</h3>
    <p>浏览器对元素新属性的重新绘制</p>
    <p>什么时候会触发重绘: </p>
    <p>重排的时候，一定会发生重绘</p>
    <p>元素的外观变化，如 字体大小、颜色、背景颜色等的变化</p>
  </div>
</template>

<script>
export default {
  name: 'Audition110'
}
</script>

<style>

</style>